<!--答题匹配-->
<template>
	<view style="padding:0 30rpx;">
		<view class="questionBox">
			<uni-forms class="form" :modelValue="individualForm" ref="individual2" :labelWidth="80">
				<uni-forms-item label="公司全称" required name="enterpriseName">
					<view class="companyName">
						{{ individualForm.enterpriseName }}
					</view>
				</uni-forms-item>
			</uni-forms>

		</view>

		<view class="msg-box">
			<view class="image-start">
				<image :src="require('../static/questingbg.png')" mode="scaleToFill" />
			</view>
			<view class="title">即将开始答题</view>
			<view class="content"> 为保证结果精准，请尽可能提供准确信息</view>
			<view class="footerBox">

				<view class="btnBox">
					<button class="estimate" @click="questionPage">开始评估</button>
				</view>
				<view class="checkBox">
					<checkbox-group @change="isChecked = !isChecked" style="width: auto">
						<checkbox color="#488AFD" style="transform: scale(0.7)" :checked="isChecked" shape="circle">
						</checkbox>
					</checkbox-group>
					<view style="font-size: 24rpx; color: #999;">我已阅读并同意
						<text style="color: #2872fd" @click="toAgreement">《授权协议》</text>
					</view>
				</view>
			</view>

			<uni-popup ref="popupSubmit" background-color="#fff">
				<view class="popup-content" style="text-align: center">
					<image style="width: 210rpx; height: 210rpx; margin-top: 30rpx"
						:src="require('../static/nocount.jpg')" mode=""></image>
					<view style="margin-top: 30rpx">今日提交已达每日三次上限 </view>
					<view>明日再来哦～</view>
					<view class="btn-st" style="margin-top: 50rpx" @click="closeDialog">我知道了</view>
					<view @click="closeDialog" style="
              width: 36rpx;
              height: 36rpx;
              position: absolute;
              right: 26rpx;
              top: 20rpx;
            ">
						<image src="require('../static/close.png')" style="width: 100%; height: 100%"></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		checkAnswer,
		createMatch
	} from "@/api/product";
	import {
		API_CHANNELTYPE
	} from "@/config/app";
	export default {

		data() {
			return {
				isChecked: false,
				individualForm: {}
			};
		},
		onLoad(options) {


			this.individualForm = {
				age: options.age,
				role: options.role,
				matchType: options.matchType,
				phone: options.phoneNumber,
				provinceId: options?.provinceId,
				enterpriseName: options.companyName,
				creditCode: options.tax
			};
			//   this.individualForm = {
			//     ...this.individualForm,
			//     enterpriseName: this.individualForm.enterpriseName,
			//     age: this.individualForm.age,
			//     role: this.individualForm.role,
			//   };
		},
		methods: {
			closeDialog() {
				this.$refs.popupSubmit.close();
			},
			// 答题匹配
			questionPage() {
				if (!this.isChecked) {
					this.$util.Tips({
						title: "请阅读并同意授权协议"
					});
				} else {
					checkAnswer().then((res) => {
						if (res.data == 0) {
							return this.$refs.popupSubmit.open();
						} else if (res.data == null) {
							return this.$util.Tips("敬请期待");
						} else {
							let params = {
								matchStep: 0,
								personStand: this.individualForm.role,
								// ageScope: this.individualForm.age,
								age: this.individualForm.age,
								creditCode: this.individualForm.creditCode,
								enterpriseName: this.individualForm.enterpriseName,
								areaId: this.individualForm.provinceId,
								channelType: API_CHANNELTYPE.channelType
							};
							createMatch(params).then((res) => {
								let pathStr =
									`/pagesProduct/AnswerTheQuestion/index?id=${encodeURIComponent(res.data.id)}&matchType=${this.individualForm.matchType}&tax=${this.individualForm.creditCode}&companyName=${this.individualForm.enterpriseName}`
								uni.redirectTo({
									url: pathStr,
								});
							});
						}
					});
				}
			},
			// 税务授权协议
			toAgreement() {
				uni.navigateTo({
					url: "/pages/privacy/authorizationAgreement"
				});
			},
			goto() {
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc389dffe7ae981936'
					},
					corpId: 'ww1c4069be6ea4025e',
					showMessageCard: true,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
				})
				// #endif
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.msg-box {
		margin-top: 100rpx;
		text-align: center;

		.image-start {
			margin: 0 auto;
			width: 382rpx;
			height: 320rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			margin-top: 50rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #333333;
		}

		.content {
			margin: 0 auto;
			width: 616rpx;
			margin-top: 34rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #999999
		}
	}

	/deep/ .uni-forms {
		width: 100% !important;
	}

	.questionBox {
		display: flex;
		// justify-content: center;
		flex-wrap: wrap;
		width: 100;
		padding-top: 40rpx;

		.form {
			width: 100%;
		}

		.image {
			width: 425rpx;
			margin-top: 25rpx;
			height: 325rpx;
		}

		.des1 {
			padding: 0 110rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			text-align: center;
			margin-top: 124rpx;
			line-height: 50rpx;
		}

		.des2 {
			font-weight: 600;
			font-size: 24rpx;
			color: #999999;
			margin-top: 58rpx;
		}
	}

	.companyName {
		padding-right: 10px;
		color: #999999;
		display: flex;
		font-size: 34rpx;
		// justify-content: flex-end;
	}

	.footerBox {
		// position: fixed;
		// //bottom: 200rpx;
		// left: 50%;
		// transform: translateX(-50%);
		margin-top: 60rpx;
		margin-bottom: 63rpx;
		//background-color: #fff;

		.checkBox {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
		}

		.btnBox {
			margin-top: 52rpx;
			display: flex;

			.btnTips {
				width: 100%;
				font-weight: 400;
				font-size: 26rpx;
				color: #545454;
				margin-bottom: 40rpx;
				text-align: center;
			}

			.informationBtn {
				margin: 10rpx auto;
				border-radius: 60rpx !important;
				background: #2872fd;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: 500;

				&:first-child {
					background-color: #fff;
					color: #2872fd;
					border: 2rpx solid #2872fd;
					width: 240rpx;
					margin-right: 62rpx;
				}

				&:last-child {
					width: 360rpx;
				}
			}

			.estimate {
				width: 686rpx;
				// height: 88rpx;
				background: #2872fd;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}

	.flexend {
		margin-top: 0rpx;
		font-size: 28rpx;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	/deep/.uni-forms-item__label {
		font-weight: 600;
		font-size: 30rpx;
		color: #333333;
		width: auto !important;
	}

	/deep/ .uni-input-placeholder {
		font-size: 28rpx;
	}

	/deep/ .uni-easyinput {
		text-align: right !important;
	}

	/deep/.uni-easyinput__content-input {
		margin-right: 20rpx !important;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
	}

	/deep/ .uni-forms-item__error {
		left: auto;
		right: 0;
	}

	.btnStyle {
		// width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #2872fd;
		border: none;
		color: white;
		border-radius: 30rpx;
	}

	.btnDisabledStyle {
		// width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #cccccc;
		cursor: not-allowed;
		border: none;
		color: white;
	}

	button:after {
		border: none;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 600rpx;
		background-color: #fff;
		text-align: center;
		width: 590rpx;
		margin: 0 auto;
		border-radius: 12rpx;
		position: relative;
		z-index: 999;
	}

	/deep/ .uni-checkbox-input {
		border-radius: 50%;
	}

	.companyTop {
		position: absolute;
		width: 100vw;
		height: 100vh;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/deep/ .uni-forms-item__label {
		color: #111111;
	}

	/deep/ .uni-popup__wrapper {
		border-radius: 20rpx;
	}

	/deep/ .uni-forms-item {
		justify-content: space-between;
		border-bottom: 1px solid #f5f5f5;
		height: 101rpx;
		display: block !important;
		padding-top: 10rpx;
		padding-bottom: 130rpx;
		// margin-bottom: 0rpx;
		// display: flex;
		// align-items: center;
	}

	.wenImage {
		display: inline-block;
		background-color: #8a8a8a;
		width: 38rpx;
		height: 38rpx;
		color: #fff;
		text-align: center;
		font-size: 26rpx;
		border-radius: 20rpx;
		line-height: 38rpx;
		margin-left: 20rpx;
	}

	.btn-st {
		width: 93%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		background-color: #3a7eff;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
</style>